<template>
  <div class="func-comp-form">

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse :value="[0,1]">
          <Panel>
            表单域配置
            <div slot="content">
              <Form :label-width="120">
                <FormItem :required="true" label="绑定表单数据字段">
                  <Input type="text" size="small" v-model="fieldConfig.bindingFieldName"/>
                </FormItem>
                <FormItem label="标签文本">
                  <Input type="text" size="small" v-model="formItemConfig.label"/>
                </FormItem>
                <FormItem label="标签宽度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="formItemConfig.labelWidth" :active-change="false"></InputNumber>
                </FormItem>
                <FormItem label="隐藏标签">
                  <i-switch size="small" v-model="formItemConfig.hiddenLabel"></i-switch>
                </FormItem>
                <FormItem label="隐藏此表单域">
                  <i-switch size="small" v-model="formItemConfig.hidden"></i-switch>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            单选框配置
            <div slot="content">
              <Form :label-width="100">

                <FormItem label="类型">
                  <RadioGroup size="small" v-model="widgetConfig.type" type="button">
                    <Radio label="default">默认</Radio>
                    <Radio label="button">按钮</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="尺寸">
                  <RadioGroup size="small" v-model="widgetConfig.size" type="button">
                    <Radio label="default">默认</Radio>
                    <Radio label="large">大号</Radio>
                    <Radio label="small">小号</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="是否垂直排列">
                  <Tooltip content="类型为按钮时无效" placement="left">
                    <i-switch size="small" v-model="widgetConfig.vertical"></i-switch>
                  </Tooltip>
                </FormItem>
              </Form>
              <Form :label-width="60">
                <FormItemPanel title="选项设置">
                  <Button size="small" type="primary" @click="addRadioItem"><Icon type="md-add" /> 添加选项</Button>
                  <div class="m-b-5px"></div>
                  <draggable tag="Collapse" :component-data="{attrs: {accordion: true}}" :list="widgetConfig.radios" handle=".ivu-collapse-header">
                    <Panel :name="$PnUtil.uuid()" v-for="(row, index) in widgetConfig.radios" :key="index">
                      {{row.label ? row.label : '未设置选项标签'}}
                      <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteRadioItem(index)"><Icon type="md-trash" /></a>
                      <div slot="content">
                        <FormItem label="标签">
                          <Input size="small" v-model="row.label" placeholder=""/>
                        </FormItem>
                        <FormItem label="值">
                          <Input size="small" v-model="row.value" placeholder=""/>
                        </FormItem>
                        <FormItem label="禁用">
                          <i-switch size="small" v-model="row.disabled"></i-switch>
                        </FormItem>
                      </div>
                    </Panel>
                  </draggable>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane name="field_config_tab" tab="main_tabs" label="数据校验">
        <FormItemRuleCreator v-model="formItemConfig.rules"></FormItemRuleCreator>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <FormItemInteractionEditTable :widgetEventCodeConfig="widgetEventCodeConfig"></FormItemInteractionEditTable>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
import FormWidgetFormMixin from "@/mixin/FormWidgetFormMixin";

import {createHelpers} from 'vuex-map-fields';
const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItemFromTree',
  mutationType: 'designer/updateLayoutItemFromTree',
});

export default {
  name: "FormItemRadioWidgetForm",
  mixins: [FormWidgetFormMixin],
  props: {},
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    addRadioItem() {
      this.widgetConfig.radios.push({
        label: '',
        value: '',
        disabled: false
      })
    },
    deleteRadioItem(index) {
      this.widgetConfig.radios.splice(index, 1)
    }
  },
  computed: {
    ...mapFields({

      fieldConfig: 'component.compConfigData.fieldConfig',
      formItemConfig: 'component.compConfigData.formItemConfig',
      widgetConfig: 'component.compConfigData.widgetConfig',
      widgetEventCodeConfig: 'component.compConfigData.widgetEventCodeConfig',

    })
  },
  watch: {}
}
</script>

<style scoped>

</style>
